<template>
  <div class="myUpload">
    <div class="headerTop">
      <el-card>
        <el-form>
          <el-row>
            <el-col :span="5" class="ml-4">
              <el-form-item label="" prop="date">
                <el-date-picker size="default" v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
                  type="daterange" start-placeholder="请选择" end-placeholder="创建时间"
                  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-220px" />
              </el-form-item></el-col>
            <el-col :span="5" class="ml-8">
              <el-form-item label="" prop="status">
                <el-select v-model="queryParams.imgType" @change="imgTypeChange" multiple collapse-tags-tooltip
                  placeholder="请选择图库类型" size="default">
                  <el-option v-for="(dict, index) in [{ label: 'test', value: 'test' }]" :label="dict.label"
                    :value="dict.value" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="ml-8">
              <el-form-item label="" prop="search">
                <el-input v-model="queryParams.search" size="default" placeholder="请输入图库名称/图库描述" clearable
                  @keyup.enter="searchImgLib" />
              </el-form-item>
            </el-col>
            <el-col :span="6" class="ml-auto">
              <el-form-item label="" prop="">
                <el-button type="primary" @click="query">查 询</el-button>
                <el-button type="default" @click="reset">重 置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="tableWrap flex flex-col gap-2 overflow-hidden">
      <section class="w-full h-[48px] flex flex-row">
        <section class="left flex items-center gap-1">
          <img src="/public/Menu.svg" class="!w-[18px]" />
          <span class="leading-21 fontStyle0">图库列表</span>
        </section>
        <section class="rightBtn ml-auto flex items-center">
          <el-button type="primary" @click="openDialog('1')">新 建</el-button>
        </section>
      </section>
      <el-table class="w-full" height="455"
        :header-cell-style="{ backgroundColor: '#f2f2f2', fontWeight: 700, color: '#909399' }" :data="demoData"
        :stripe="true" :show-overflow-tooltip="true">
        <el-table-column align="left" type="index" label="序号" width="60" prop="imgLibId" />
        <el-table-column align="left" label="图库ID" width="190" prop="id" />
        <el-table-column align="left" width="130" label="名称" prop="name">
          <template #default="scope">
            <el-button link class="!border-b-indigo" type="primary" @click="toInfo(scope.row)">
              <span class="font-600 c-indigo underline-blue border-b-indigo">
                {{ scope.row.name }}</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="left" width="120" label="类型" :formatter="formatterType" prop="type" />
        <el-table-column align="left" width="120" label="权限" :formatter="formatterAuth" prop="isPrivate" />
        <el-table-column align="left" width="120" label="描述" prop="description" />
        <!-- <el-table-column align="left" width="120" label="图库标签字符" prop="galleryTagsName"
          :formatter="formatterGalleryTagsName" /> -->
        <el-table-column align="left" width="140" label="已标注/图片数" prop="" :formatter="formatterCount" />
        <el-table-column align="left" width="160" label="应用项目" prop="apply" />
        <el-table-column align="left" width="140" label="创建人" prop="creator" />
        <el-table-column align="left" width="166" label="创建时间" :formatter="formatterTime" prop="createTime" />
        <el-table-column align="left" width="260" label="最近更新时间" prop="lastUpdateTime" />
        <el-table-column align="left" label="操作" width="220" fixed="right" prop="action">
          <template #default="scope">
            <el-button link type="primary" @click="openDialog('2', scope.row)"> 图库上传 </el-button>
            <el-button link type="primary" @click="openDialog('3', scope.row)"> 编辑 </el-button>
            <el-button link type="primary" @click="deleteRecord(scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination class="myPagination" layout=" total, prev, pager, next, jumper," v-show="total > 0" :total="total"
        v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" @pagination="getList" />
    </div>
    <ImgLibForm ref="formRef" width="50%" @success="getList" />
    <picUploadForm ref="picUploadFormRef" width="50%" />
  </div>
</template>

<script lang="ts" setup>
const message = useMessage() // 消息弹窗
import { cates } from '@/utils/a-common';
import { getGalleryPage, deleteGallery } from '@/api/gallery-upload/index'
import ImgLibForm from './imgLibForm.vue'
import picUploadForm from './picUploadForm.vue'
import { formatDate } from '@/utils/formatTime'
import router from '@/router';
import { useAnnotationStore } from '@/store/modules/annotation';

let formRef = ref()
let picUploadFormRef = ref()
let queryParams = reactive({
  createTime: [],
  imgType: '',
  search: '',
  pageSize: 10,
  pageNo: 1
})
let total = ref(0)
const demoData = ref([
  {
    imgLibId: '222222',
    id: '3333333',
    name: '2222',
    type: '222',
    auth: '2222',
    desc: '2222222222222222222222222222222222222222222222222',
    markCount: '22222',
    apply: '22222222',
    creator: '222222222',
    createTime: '2222222222',
    lastUpdateTime: '22222222222'
  }
])


const toInfo = (row) => {
  router.push({ name: 'galleryInfo', query: { row: JSON.stringify(row) } })
  useAnnotationStore().setCurrentGalleryId(row.id)
}

const deleteRecord = async (row) => {
  try {
    await message.confirm(`您确定删除【${row.name}】图库吗？`)
    const res = await deleteGallery(row.id)
    if (res) {
      message.success('删除成功')
      getList()
    }
  } catch (error) {
    message.info('取消！！！')
    throw error
  }


}
const formatterGalleryTagsName = (row) => {
  console.log(row)
}

const formatterCount = (row, column, cellValue, index) => {
  return `${row.markNum}/${row.imageCount}`
}

const formatterType = (row, column, cellValue, index) => {
  const filter = cates.find((item) => item.value == cellValue)
  return filter?.label
}
const formatterAuth = (row, column, cellValue, index) => {
  return cellValue == '1' ? '公开' : '私有'
}
const formatterTime = (row, column, cellValue, index) => {
  return formatDate(cellValue)
}
const query = () => {
  console.log('query', '123')
}
const reset = () => { }
const getList = async () => {
  const res = await getGalleryPage(queryParams)
  if (res) {
    demoData.value = res.list
    total.value = res.total
  }
}
const imgTypeChange = () => { }
const searchImgLib = () => { }

const openDialog = (dialogType, row) => {
  switch (dialogType) {
    case '1':
      // create
      formRef.value.open()
      break
    case '2':
      // uploadPic
      picUploadFormRef.value.open(row)
      break
    case '3':
      // updatePic
      formRef.value.open(row)
      break
  }
}
onMounted(() => {
  getList()
})
</script>

<style lang="scss">
:deep(.el-table__row--striped .el-table__cell) {
  background: #f2f2f2 !important;
}

:deep(.el-table__header) {
  .cell {
    font-weight: 900 !important;
    color: #101010 !important;
  }
}

:deep(.el-table__row) {
  .cell {
    font-family: Roboto, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Microsoft Yahei',
      'WenQuanYi Micro Hei', 'Pingfang SC', sans-serif;
    font-weight: 400 !important;
    color: #101010 !important;
  }
}

.fontStyle0 {
  overflow: visible;
  width: 56px;
  height: 20px;
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  box-shadow: none;
  writing-mode: horizontal-tb;
  color: rgb(16, 16, 16);
  letter-spacing: 0px;
  line-height: 20px;
  padding: 0px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  text-shadow: none;
}

.myUpload {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .headerTop {
    width: 100%;
    height: 15%;
  }

  .tableWrap {
    flex: 1;
  }
}
</style>
